<template>
    <div id="venue_chart" style="width: 100%;height: 500px;"></div>
</template>

<script setup lang='ts'>
import * as echarts from 'echarts'
import { onMounted, reactive } from 'vue';
import { useRouter } from 'vue-router';

type EChartsOption = echarts.EChartsOption;

// 引入路由
const router = useRouter()

const props = defineProps([
    'charts_data'
])

onMounted(() => {
    initCharts()
})

const option: EChartsOption = reactive({
    tooltip: {
        trigger: 'item'
    },
    legend: {
        left: 'right',
        data: ["Other"],
        selected: {
            "Other": false
        }
    },
    series: [
        {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            data: []
        }
    ]
});

const initCharts = (() => {
    (option.series as any)[0].data = props.charts_data.data
    var chartDom = document.getElementById("venue_chart")!;
    var myChart = echarts.init(chartDom);
    option && myChart.setOption(option);
    myChart.on('click', (param) => {
        if ((param.data as any).id !== "" && (param.data as any).id !== "-1") {
            let router_data = router.resolve({ name: 'Journal', params: { id: (param.data as any).id } })
            window.open(router_data.href, '_blank')
        }
    })
})

</script>

<style scoped>
</style>